<template>
    <div class="rightOne">
        <ThemeTitle :title="title"/>
        <div class="wordDec">
            <div class="population">
                <span>截止2020年海南省人口总数：</span>
                <span>{{val}}</span>
                <span>万人</span>
            </div>
            <div class="port">
                <div class="enterPort">
                    <span>今日进港：</span>
                    <span>634</span>
                    <span>人</span>
                </div>
                <div class="leavePort">
                    <span>今日离港：</span>
                    <span>98</span>
                    <span>人</span>
                </div>
            </div>
        </div>
        <div id="populationChart">
            
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  inject,
  provide
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    name:'HngkRightOne',
    components: {
        ThemeTitle
    },
    props:{
        val:Object
    },
    setup(props,context){
        const title = provide("title","人口统计");
        const { ctx } = getCurrentInstance();
        console.log(props.val)
        function drawChart(){
            let dom = document.getElementById("populationChart");
            let myChart = ctx.$echarts.init(dom);
            let scale = 1;
            let echartData = [{
                    value: 21,
                    name: '海口市'
                }, {
                    value: 38,
                    name: '三亚市'
                }, {
                    value: 35,
                    name: '三沙市'
                }, {
                    value: 31,
                    name: '五指山市'
                }, {
                    value: 28,
                    name: '文昌市'
                }, {
                    value: 24,
                    name: '琼海市'
                }, {
                    value: 25,
                    name: '万宁市'
                }]
            var rich = {
                yellow: {
                    color: "#3bc7ff",
                    fontSize: 14 * scale,
                    padding: [8, 0],
                    align: 'center'
                },
                total: {
                    color: "#A2C7F3",
                    fontSize: 30 * scale,
                    align: 'bottom'
                },

                white: {
                    color: "#fff",
                    align: 'center',
                    fontSize: 14 * scale,
                    padding: [8,0 ]
                },
                blue: {
                    color: '#3bc7ff',
                    fontSize: 18 * scale,
                    align: 'center'
                },
                hr: {
                    borderColor: '#a2c7f3',
                    width: '100%',
                    borderWidth: 1,
                    height: 0,
                }
            }
            let option = {
                title: {
                    text:'总人口',
                    left:'center',
                    top:'35%',
                    padding:[10,0],
                    textStyle:{
                        color:'#6B9DD7',
                        fontSize:20*scale,
                        fontWeight:'normal',
                        align:'center'
                    }
                },
                legend: {
                    selectedMode:false,
                    formatter: function(name) {
                        var total = 994.2; //各科正确率总和
                        var averagePercent; //综合正确率
                        // echartData.forEach(function(value, index, array) {
                        //     total += value.value;
                        // });
                        return '{total|' + total + '}{white|分}';
                    },
                    data: [echartData[0].name],
                    // data: ['高等教育学'],
                    // itemGap: 50,
                    left: 'center',
                    top: '50%',
                    icon: 'none',
                    align:'bottom',
                    textStyle: {
                        color: "#fff",
                        fontSize: 10 * scale,
                        rich: rich
                    },
                },
                series: [{
                    name: '总考生数量',
                    type: 'pie',
                    radius: ['70%', '45%'],
                    //hoverAnimation: false,
                    color: ['#2ECACE', '#2039C3', '#0F9AF8', '#2B63D5', '#2039C3', '#2ECACE','#6F81DA'],
                    label: {
                        // normal: {
                            formatter: function(params, ticket, callback) {
                                var total = 0; //考生总数量
                                var percent = 0; //考生占比
                                echartData.forEach(function(value, index, array) {
                                    total += value.value;
                                });
                                percent = ((params.value / total) * 100).toFixed(1);
                                return '{white|' + params.name + ' }{yellow|' + params.value + '分 }{blue|' + percent + '%}';
                            },
                            rich: rich
                        // },
                    },
                    labelLine: {
                        // normal: {
                            length: 20 * scale,
                            length2: 0,
                            lineStyle: {
                                color:'#a2c7f3'
                            }
                        // }
                    },
                    data: echartData
                }]
            };
            myChart.setOption(option);
        }
        onMounted(()=>{
           
            drawChart()
        })
        return {
           title
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .rightOne
        .wordDec
            font-weight bold
            padding-top:vh(15)
            padding-left:vw(15)
            letter-spacing : vw(1)
            .population
                span:nth-child(1)
                    color:#fff
                    font-size:vw(12)
                    letter-spacing : vw(1)
                span:nth-child(2)
                    color:#0090FF
                    font-size:vw(18)
                span:nth-child(3)
                    color:#0090FF
                    font-size:vw(12)
            .port
                display:flex
                margin-top:vh(12)
                .enterPort
                    span:nth-child(1)
                        color:#fff
                        font-size:vw(12)
                        letter-spacing : vw(1)
                    span:nth-child(2)
                        color:#00E5FD
                        font-size:vw(18)
                    span:nth-child(3)
                        color:#00E5FD
                        font-size:vw(12)
                .leavePort
                    margin-left:vw(60)
                    span:nth-child(1)
                        color:#fff
                        font-size:vw(12)
                        letter-spacing : vw(1)
                    span:nth-child(2)
                        color:#FFBC32
                        font-size:vw(18)
                    span:nth-child(3)
                        color:#FFBC32
                        font-size:vw(12)
        #populationChart
            margin-top:vh(13)
            margin-bottom: vh(17)
            width:100%
            height: vh(180)
</style>